<template>
  <div class="PageNav">
    <div class="top_logo">
      <div class="fold_button" @click="sidebarFlag">
        <svg
          t="1611304230358"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2493"
          width="25"
          height="25"
        >
          <path
            d="M126 192.5h772M898 227.5H126c-19.3 0-35-15.7-35-35s15.7-35 35-35h772c19.3 0 35 15.7 35 35s-15.7 35-35 35zM126 511.5h772M898 546.5H126c-19.3 0-35-15.7-35-35s15.7-35 35-35h772c19.3 0 35 15.7 35 35s-15.7 35-35 35z"
            p-id="2494"
            fill="#ffffff"
          ></path>
          <path
            d="M126 830.5h772M898 865.5H126c-19.3 0-35-15.7-35-35s15.7-35 35-35h772c19.3 0 35 15.7 35 35s-15.7 35-35 35z"
            p-id="2495"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
      <div class="logo">
        <svg class="topsvg" viewBox="0 0 426 75" version="1.1">
          <defs>
            <polygon id="path-1" points="0 0 426 0 426 73 0 73"></polygon>
          </defs>
          <g
            id="Page-1"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <g id="收回状态" transform="translate(-60.000000, -113.000000)">
              <g id="Group-15" transform="translate(60.000000, 114.000000)">
                <mask id="mask-2" fill="white">
                  <use xlink:href="#path-1"></use>
                </mask>
                <g id="Clip-2"></g>
                <path
                  d="M179.554313,17.7624722 L213.491741,17.7624722 L213.491741,12.4750555 L179.554313,12.4750555 L179.554313,17.7624722 Z M179.554313,27.5249445 L213.491741,27.5249445 L213.491741,22.2375278 L179.554313,22.2375278 L179.554313,27.5249445 Z M176.203089,32 L216.796911,32 C218.01359,32 219,30.9973266 219,29.7619285 L219,10.2380715 C219,9.00158594 218.01359,8 216.796911,8 L176.203089,8 C174.98641,8 174,9.00158594 174,10.2380715 L174,29.7619285 C174,30.9973266 174.98641,32 176.203089,32 L176.203089,32 Z"
                  id="Fill-1"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M218.788935,36 L176.646545,36 C175.963242,36 175.318616,36.3101024 174.898535,36.8417064 L170.489297,42.8802641 L166.109067,48.7732635 C165.838324,49.1371592 166.102621,49.6476678 166.561379,49.6476678 L171.415409,49.6476678 C171.802184,49.6476678 172.165323,49.4683569 172.392017,49.1614189 L178.723313,40.6578639 L187.616996,40.6578639 L171.733424,62.1066099 C171.458384,62.4778889 171.728052,63 172.197555,63 L176.994642,63 C177.39431,63 177.769267,62.812251 178.004556,62.4947652 L194.17606,40.6578639 L203.25561,40.6578639 L187.36022,62.1319244 C187.0927,62.4926557 187.355922,63 187.810383,63 L192.700942,63 C193.063007,63 193.402509,62.830182 193.615236,62.5422299 L209.814674,40.6578639 L212.787472,40.6578639 L215.473411,40.6641925 L215.473411,50.4197594 L215.473411,52.227635 L215.473411,53.8635831 C215.473411,55.913001 213.781269,57.5732088 211.693757,57.5732088 L207.171709,57.5732088 C206.811793,57.5732088 206.472291,57.7430268 206.260639,58.0299242 L203.262056,62.0812954 C202.979495,62.4631221 203.256684,63 203.738004,63 L211.692683,63 C216.833571,63 221,58.9085475 221,53.8625283 L221,38.1707165 C221,36.9714431 220.0105,36 218.788935,36"
                  id="Fill-3"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M290.397597,29 L234.605619,29 C234.271189,29 234,29.2685607 234,29.5997502 L234,31.0264127 C234,32.8023103 235.453486,34.2417109 237.246761,34.2417109 L251.763394,34.2417109 L238.50945,59.1191383 C238.182523,59.7316266 238.064614,60.4470809 238.257555,61.1126444 C238.590913,62.2590696 239.63172,63 240.774357,63 L285.32862,63 C285.947101,63 286.565583,62.8248517 287.046862,62.4395254 C288.008349,61.6741805 288.28061,60.4099282 287.811121,59.3622229 L280.571563,45.5552295 C280.448295,45.2781767 280.170675,45.0998439 279.865186,45.0998439 L275.617278,45.0998439 C275.056679,45.0998439 274.68366,45.6709335 274.909829,46.1762098 L281.180398,57.8241024 L245.108017,57.8241024 L257.673806,34.2417109 L288.010493,34.2417109 C289.661207,34.2417109 291,32.9180144 291,31.2832969 L291,29.5955042 C291,29.2664377 290.729883,29 290.397597,29"
                  id="Fill-4"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M242.196822,16 L283.894175,16 C285.610124,16 287,14.7011541 287,13.098603 L287,11.6246204 C287,11.2794088 286.701009,11 286.331603,11 L239.721479,11 C239.322824,11 239,11.3026929 239,11.6752379 L239,13.0115408 C239,14.6626848 240.431041,16 242.196822,16"
                  id="Fill-5"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M151.264147,9 L101.734789,9 C100.224326,9 99,10.2372716 99,11.7647806 L99,63.3657774 C99,63.7162123 99.2808185,64 99.626523,64 L103.844119,64 C104.189823,64 104.471705,63.7162123 104.471705,63.3657774 L104.471705,14.5295612 L148.528295,14.5295612 L148.528295,18.8831232 L148.528295,54.6876771 C148.528295,56.7773869 146.852957,58.4704388 144.786176,58.4704388 L141.782269,58.4704388 C141.431246,58.4704388 141.100433,58.6402814 140.894074,58.928369 L137.790179,63.2443076 C137.564673,63.5581941 137.786988,64 138.170986,64 L144.785112,64 C149.78985,64 153.867037,59.9442001 153.988299,54.9144923 L154,54.9144923 L154,18.8831232 L154,11.7647806 C154,10.2372716 152.77461,9 151.264147,9"
                  id="Fill-6"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M139.105892,51.7258834 C139.202735,51.8953177 139.382432,52 139.577194,52 L144.455914,52 C144.873413,52 145.134888,51.5488947 144.927215,51.1852045 L136.561081,36.5005396 L144.927215,21.8147955 C145.134888,21.4511053 144.873413,21 144.455914,21 L139.577194,21 C139.382432,21 139.201659,21.1046823 139.105892,21.2741166 L133.499776,31.1131767 L127.89366,21.2741166 C127.796817,21.1046823 127.61712,21 127.422359,21 L122.543639,21 C122.126139,21 121.86574,21.4511053 122.072337,21.8147955 L130.438471,36.5005396 L122.072337,51.1852045 C121.86574,51.5488947 122.127215,52 122.543639,52 L127.422359,52 C127.61712,52 127.796817,51.8953177 127.89366,51.7258834 L133.499776,41.8868233 L139.105892,51.7258834 Z"
                  id="Fill-7"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M122.913468,36.7250131 C123.015409,36.5652916 123.036462,36.3570061 122.926764,36.1703046 L114.176424,21.2751958 C114.076699,21.1046823 113.890545,21 113.689987,21 L108.607321,21 C108.177394,21 107.908136,21.4521845 108.121991,21.8147955 L116.718311,36.4476588 L108.074345,51.1852045 C107.861598,51.5488947 108.130856,52 108.559675,52 L113.64234,52 C113.844007,52 114.029053,51.8963969 114.128778,51.7258834 L122.902387,36.768181 C122.910143,36.7541514 122.906819,36.7390426 122.913468,36.7250131"
                  id="Fill-8"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M318.821517,16.2678439 L342.178483,16.2678439 L336.236874,26.7030283 L324.763126,26.7030283 L318.821517,16.2678439 Z M358.297898,26.7030283 L342.329622,26.7030283 L348.271231,16.2678439 L351.581296,16.2678439 C353.336016,16.2678439 354.759516,14.8433039 354.759516,13.0862282 L354.759516,11.591963 C354.759516,11.2476277 354.482962,10.9697995 354.138878,10.9697995 L333.728599,10.9697995 L331.249267,6.64790824 C331.018805,6.24672003 330.591113,6 330.13019,6 L325.760005,6 C325.320521,6 325.046111,6.47413153 325.265853,6.85493853 L327.628347,10.9697995 L306.895423,10.9697995 C306.534188,10.9697995 306.240484,11.2637181 306.240484,11.6262893 L306.240484,13.0862282 C306.240484,14.8433039 307.663984,16.2678439 309.419776,16.2678439 L312.729841,16.2678439 L318.670378,26.7030283 L302.699959,26.7030283 C302.31407,26.7030283 302,27.0162555 302,27.4024259 L302,28.8484198 C302,30.5894051 303.409564,32 305.149278,32 L355.92254,32 C357.622593,32 359,30.6215859 359,28.9202905 L359,27.405644 C359,27.0173282 358.684858,26.7030283 358.297898,26.7030283 L358.297898,26.7030283 Z"
                  id="Fill-9"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M313.573787,58.1818111 L346.448875,58.1818111 L346.448875,51.9080397 L313.573787,51.9080397 L313.573787,58.1818111 Z M341.780492,40.8181889 L346.448875,40.8181889 L346.448875,45.6711852 L346.448875,47.0909055 L313.573787,47.0909055 L313.573787,40.8181889 L341.780492,40.8181889 Z M349.33559,36 L341.780492,36 L310.66441,36 C309.192456,36 308,37.1665755 308,38.6052817 L308,60.3947183 C308,61.8323697 309.192456,63 310.66441,63 L349.33559,63 C350.806465,63 352,61.8323697 352,60.3947183 L352,45.6711852 L352,38.6052817 C352,37.1665755 350.806465,36 349.33559,36 L349.33559,36 Z"
                  id="Fill-10"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M420.846348,36.3948403 C422.589268,36.3948403 424,34.965091 424,33.2010866 L424,31.636557 C424,31.3227884 423.749795,31.0694015 423.441031,31.0694015 L401.309036,31.0694015 L401.309036,19.5774949 C401.309036,19.2281444 401.030084,18.9445667 400.684055,18.9445667 L398.970947,18.9445667 C397.23761,18.9445667 395.832201,20.3667683 395.832201,22.1221468 L395.832201,31.0694015 L377.58744,31.0694015 L379.41873,17.1147895 C394.970856,16.3600199 410.820034,14.4504527 417.280655,13.6115802 C418.943723,13.3959317 420.111702,11.848654 419.878532,10.1676743 L419.641103,8.46189491 C419.600645,8.17076949 419.344051,7.96590345 419.055516,8.00472017 C415.637818,8.47375558 395.729989,11.1240752 376.963523,11.8950184 C375.674167,11.9478523 374.612658,12.94307 374.460405,14.242352 L372.017975,33.4188915 C371.930669,34.1736611 372.163839,34.9316655 372.66425,35.4998992 C373.162531,36.0692111 373.879077,36.3948403 374.629693,36.3948403 L395.832201,36.3948403 L395.832201,54.6581086 C395.832201,56.7542117 394.155293,58.4535215 392.085509,58.4535215 L391.127276,58.4535215 C390.740788,58.4535215 390.37666,58.6422139 390.149878,58.9602954 L387.296472,62.9648874 C386.989837,63.3961843 387.294343,64 387.819242,64 L392.085509,64 C397.179051,64 401.309036,59.8174981 401.309036,54.6581086 L401.309036,36.3948403 L420.846348,36.3948403 Z"
                  id="Fill-11"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M386.462033,41 L382.648283,41 C381.597491,41 380.622889,41.5352219 380.050403,42.433746 C377.428185,46.5500892 373.74671,53.9415581 370.118145,59.8354868 C369.804918,60.3436774 370.149891,61 370.737191,61 L374.203852,61 C375.248295,61 376.239828,60.4734281 376.794324,59.5694978 C380.889555,52.8992269 384.728702,45.625615 386.919175,41.847705 C387.137164,41.4714278 386.890603,41 386.462033,41"
                  id="Fill-12"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M425.881861,59.8354868 C422.253461,53.9415581 418.572153,46.5500892 415.948996,42.433746 C415.376536,41.5352219 414.401979,41 413.351235,41 L409.537659,41 C409.108049,41 408.862558,41.4714278 409.081595,41.847705 C411.27091,45.625615 415.108824,52.8992269 419.204927,59.5694978 C419.760457,60.4734281 420.750886,61 421.796339,61 L425.262842,61 C425.850116,61 426.195073,60.3436774 425.881861,59.8354868"
                  id="Fill-13"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
                <path
                  d="M40.4991735,31.4579385 C40.219059,30.4818472 39.9378671,29.500369 39.682532,28.5555211 C39.0059476,28.6869595 38.3336728,28.8798076 37.6732489,29.1340654 C35.2147053,30.0810679 33.2732961,32.1474512 32.6074855,34.5305794 C32.3844712,35.3278284 32.3079784,36.1584758 32.3812391,36.997742 C32.5266832,38.6558045 33.3950382,40.1888928 34.7051123,41.1003424 C35.5066708,41.656262 36.8188996,42.2186458 38.5200567,41.7521473 C39.4465893,41.4946575 40.2643083,40.9548983 40.8169958,40.2330647 C42.0548865,38.615942 41.8986688,36.6346704 41.5506804,35.2567225 C41.2522507,34.0780867 40.8773281,32.7744768 40.4991735,31.4579385 M55.0974497,49.521016 C51.4548836,55.39157 44.424009,59.1849671 37.1852032,59.1849671 C25.07025,59.1849671 15.2134508,49.3292453 15.2134508,37.214292 C15.2134508,36.1293869 15.2974852,35.0337082 15.4623218,33.957422 C15.5959149,33.0922991 15.7822988,32.2282535 16.017164,31.391142 C16.2477198,30.5648042 16.5321438,29.7427758 16.8618171,28.9487588 C17.1871808,28.1622834 17.5631807,27.387659 17.9790431,26.6464329 C18.3884412,25.9127483 18.8484755,25.1930695 19.3451401,24.5067889 C19.8364178,23.8269725 20.3740223,23.167626 20.9450249,22.5470646 C21.5106408,21.9286579 22.1215059,21.3350305 22.7571504,20.7855751 C23.3917176,20.2361197 24.0661472,19.7168305 24.7632014,19.2427905 C25.4634877,18.7655185 26.1971723,18.3259541 26.94594,17.9348712 C27.3564155,17.7215532 27.7744325,17.5190088 28.1989138,17.3315476 C28.4359338,17.2281207 28.6675669,17.1290032 28.9013548,17.03635 C30.1392456,16.5407627 31.5419729,17.1451637 32.0354054,18.3830544 C32.5277606,19.6198678 31.9255143,21.0215178 30.6876236,21.5149503 C30.5077039,21.5871336 30.3288615,21.6636264 30.1521739,21.7411966 C29.8225007,21.8866407 29.4982142,22.0428584 29.1782373,22.2109271 C28.5943062,22.5147436 28.0222262,22.8573453 27.4781576,23.2279583 C26.9351663,23.5985714 26.4083355,24.0036601 25.9127483,24.4324508 C25.4171611,24.8612415 24.9420437,25.3234304 24.49817,25.805012 C24.0542962,26.2909029 23.6352017,26.8048053 23.2516603,27.3348682 C22.8648868,27.8692405 22.5061247,28.4305469 22.1861478,29.002627 C21.8629387,29.5790165 21.5709732,30.1823401 21.3167154,30.7942826 C21.0613802,31.4116119 20.8405207,32.0494111 20.6595236,32.6925972 C20.4774492,33.3444021 20.3320051,34.0155996 20.2296555,34.6889519 C20.1003719,35.5239086 20.0357301,36.3728711 20.0357301,37.214292 C20.0357301,46.670312 27.7291833,54.3637652 37.1852032,54.3637652 C42.7939579,54.3637652 48.2163287,51.4645798 51.0002361,46.9773606 C54.1698397,41.8706573 53.3488887,35.0218572 49.0922253,31.0453083 C47.8661855,29.9000708 46.3578766,29.1038992 44.7224387,28.6837274 C44.8592639,29.1631542 44.9971664,29.645813 45.1350689,30.1273946 C45.517533,31.4590159 45.911848,32.8358865 46.2253608,34.0737773 C47.0872517,37.4782461 46.5270226,40.7071047 44.6470232,43.1634936 C43.4586912,44.7170519 41.739219,45.8655214 39.804274,46.3998937 C37.0699253,47.1529709 34.2838632,46.6789309 31.9535258,45.0607308 C29.4809764,43.3412586 27.8444612,40.4851678 27.577275,37.415759 C27.4533782,35.9957939 27.5826618,34.5876797 27.9640485,33.2302016 C29.0317158,29.4109478 32.0892736,26.11637 35.9408483,24.6339178 C36.7628767,24.3171729 37.6010656,24.0683019 38.4446412,23.8873048 C38.343369,23.5048408 38.1494436,22.7690014 38.0373978,22.349907 C36.9083208,18.1794327 38.7990938,14.505623 42.7411671,13.2030904 C43.7420378,12.8734172 44.8118599,12.7624487 45.8590572,12.8831134 C46.3352519,12.938059 46.8049824,13.0393311 47.2607072,13.1858526 C48.2303344,13.4961333 49.1428614,13.99603 49.9164084,14.6596859 C50.318265,15.0044423 50.7082706,15.3998347 50.9776115,15.8534048 C50.9883851,15.8727973 50.9991588,15.8911125 51.0099324,15.910505 C51.0260929,15.9385165 51.0411759,15.9676053 51.056259,15.9956168 C51.2243278,16.32529 51.3202131,16.6980578 51.3202131,17.0934502 C51.3202131,18.4250716 50.2406948,19.5045899 48.9090735,19.5045899 C48.273429,19.5045899 47.6959621,19.258951 47.2650167,18.856017 C46.9989079,18.6093007 46.7715842,18.3248768 46.4796186,18.1040172 C46.2016588,17.8950087 45.8838366,17.7355589 45.5466218,17.6461377 C45.2244901,17.561026 44.8861979,17.5437882 44.5576021,17.5998111 C43.8325364,17.7204758 43.1785767,18.1675817 42.8295109,18.8172319 C42.749786,18.9659081 42.6765253,19.1135069 42.6291213,19.2751114 C42.4599752,19.8568877 42.5332359,20.5097701 42.6916084,21.0850822 C42.9006169,21.8629387 43.1721125,22.9015172 43.3509549,23.5802562 C46.7252575,23.8765312 49.9250273,25.224313 52.3835709,27.5212521 C58.3877181,33.1289294 59.5297234,42.3813277 55.0974497,49.521016 M36.5,0 C16.3425278,0 0,16.3414505 0,36.5 C0,56.6585495 16.3425278,73 36.5,73 C56.6585495,73 73,56.6585495 73,36.5 C73,16.3414505 56.6585495,0 36.5,0"
                  id="Fill-14"
                  fill="#FFFFFF"
                  mask="url(#mask-2)"
                ></path>
              </g>
            </g>
          </g>
        </svg>
      </div>
      <div class="search_button" @click="ToSearch">
        <svg
          t="1611304945007"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3402"
          width="23"
          height="23"
        >
          <path
            d="M996.864 961.536l-201.216-201.728c74.752-78.848 121.344-185.344 121.344-302.592 0-242.176-197.12-439.296-439.296-439.296S38.4 215.04 38.4 457.216s197.12 439.296 439.296 439.296c102.912 0 198.144-35.84 272.896-95.744 0.512 0.512 1.024 1.536 1.536 2.048l201.216 201.728c6.144 6.144 13.824 9.216 21.504 9.216s15.872-3.072 21.504-9.216c12.8-11.776 12.8-31.232 0.512-43.008zM99.84 457.216c0-208.384 169.472-377.856 377.856-377.856s377.856 169.472 377.856 377.856-169.472 377.856-377.856 377.856S99.84 665.6 99.84 457.216z"
            fill="#ffffff"
            p-id="3403"
          ></path>
        </svg>
      </div>
    </div>
    <ul class="nav">
      <li><router-link to="/Discover">发现</router-link></li>
      <li><router-link to="/Video">视频</router-link></li>
      <li><router-link to="/BroadCastStation">电台</router-link></li>
    </ul>
    <transition leave-active-class="animate__animated animate__fadeOutLeft">
    
    
    <div
      class="sidebar"
      v-if="flag"
      @click.stop="closeside"
      @mousewheel.prevent
    >
      <transition
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
        appear
      >
        <div
          class="content"
          @click.stop
          v-if="show"
          
        >
          <div class="user">
            <div class="user_left">
              <div class="photo">
                <img :src="vuexphoto" alt="" />
                <input
                  type="file"
                  class="file"
                  accept="image/*"
                  @change="upload"
                />
              </div>
            </div>
            <div class="user_right">
              <p class="name">
                {{ vuexname }}
                <van-icon name="edit" @click="changename" />
              </p>
              <p class="motto">
                {{ vuexmotto }}
                <van-icon name="edit" @click="changemotto" />
              </p>
            </div>
          </div>
          <ul class="func">
            <li>我的</li>
            <li @click="MusicList('like')">
              喜欢的音乐
              <van-icon name="arrow" />
              <span class="likenum" v-if="likelist.length !=0">{{
                ( 10 > likelist.length ) ? "0" + likelist.length : likelist.length
              }}</span>
            </li>
            <li @click="MusicList('recent')">
              最近播放
              <van-icon name="arrow" />
              <span class="likenum" v-if="recentlist.length != 0">{{
                ( 10 > recentlist.length ) ? "0" + recentlist.length : recentlist.length
              }}</span>
            </li>
          </ul>
          <ul class="func">
            <li>音乐设置</li>
            <li>
              动效
              <div class="btn" @click="effectToggle">
                <span>默认</span>
                <span>波纹</span>
                <i
                  class="ball"
                  :style="`transform:translateX(${
                    playeffect ? '0px' : '33px'
                  })`"
                ></i>
              </div>
            </li>
            <li>
              音速
              <div class="speed">
                <span @click="speed(false)"><van-icon name="minus" /></span>
                <span>{{ playspeed }}</span>
                <span @click="speed(true)"><van-icon name="plus" /></span>
              </div>
            </li>
          </ul>
          <ul class="func">
            <li>其他</li>
            <li @click="contactUs">
              联系我们
              <van-icon name="arrow" />
            </li>
            <li @click="about">
              关于
              <van-icon name="arrow" />
            </li>
          </ul>
        </div>
      </transition>
    </div>
    </transition>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
export default {
  data() {
    return {
      flag: false,
      photo: null,
      listdata: [],
      id: null,
      show: true,
    };
  },
  computed: {
    ...mapState({
      likelist: (state) => state.likeList,
      recentlist: (state) => state.recentlist,
      playeffect: (state) => state.playeffect,
      playspeed: (state) => state.playspeed,
      vuexname: (state) => state.name,
      vuexmotto: (state) => state.motto,
      vuexphoto: (state) => state.photo,
    }),
  },
  methods: {
    ...mapMutations(['saveuser']),
    MusicList(type){
      if(type == 'like'){
        this.$store.state.currentMusicList = this.likelist;
      }else{
        this.$store.state.currentMusicList = this.recentlist;
      }
      this.$store.state.MusicListType = type
      this.show = false;
      this.flag = false;
      setTimeout(()=>{
        this.$store.state.MusicListState = true;
      },300)
    },
    contactUs() {
      this.$store.state.contactUs = !this.$store.state.contactUs;
    },
    closeside() {
      this.show = false;
      this.flag = false;
    },
    ToSearch() {
      this.$router.push({
        path: "/Search",
      });
    },
    sidebarFlag() {
      this.show = true;
      this.flag = !this.flag;
    },
    upload(e) {
      var file = e.target.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (res) => {
        var base = res.target.result;
        this.$store.state.photo = base;
        this.saveuser();
      };
    },
    changename() {
      this.$store.state.dialogFalg = true;
    },
    changemotto() {
      this.$store.state.dialogFalg2 = true;
    },
    effectToggle() {
      this.$store.state.playeffect = !this.playeffect;
      console.log("切换音乐播放动效=>", this.playeffect ? "默认" : "波纹");
    },
    speed(flag) {
      this.$store.commit("changespeed", flag);
    },
    about() {
      this.$store.state.about = !this.$store.state.about;
    },
  },
  created() {
    var ll = localStorage.getItem("likelist");
    this.$store.state.likeList = JSON.parse(ll) || [];

    var recent = localStorage.getItem("recentlist");
    this.$store.state.recentlist = JSON.parse(recent) || [];

    var user = localStorage.getItem("user");
    if(!user) return;
    this.$store.state.name = (JSON.parse(user)).name || [];
    this.$store.state.motto = JSON.parse(user).motto || [];
    this.$store.state.photo = JSON.parse(user).photo || [];

  },
  mounted() {
    var p = localStorage.getItem("user");
    if (p) {
      this.photo = JSON.parse(p).photo;
      this.name = JSON.parse(p).name;
    }
  },
  watch: {
    vuexname(n) {
      this.name = n;
    },
    vuexmotto(n) {
      this.motto = n;
    },
  },
};
</script>

<style lang="less">
.animate__animated.animate__fadeOutLeft,
.animate__animated.animate__slideOutRight {
  --animate-duration: 0.6s !important;
}
.PageNav {
  width: 100%;
  max-width: 1080px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  .top_logo {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    background-color: #d33a31;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .fold_button {
      width: 25px;
      height: 25px;
    }
    .logo {
      width: 142px;
      height: 25px;
    }
    .search_button {
      width: 25px;
      height: 25px;
    }
  }
  .nav {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    li {
      flex: 1;
      display: flex;
      justify-content: center;
      a {
        display: block;
        height: 100%;
        width: 60%;
        font-weight: bold;
        font-size: 18px;
        color: #6f6f6f;
        text-align: center;
        line-height: 47px;
        border-bottom: 3px solid transparent;
      }
      .router-link-exact-active {
        color: #d33b32;
        border-bottom: 3px solid #d33a31;
      }
    }
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    .content {
      width: 80vw;
      height: 100vh;
      background-color: #f6f6f6;
      text-align: center;
      padding-top: 10px;
      padding-left: 10px;
      padding-right: 10px;
      position: relative;
      .user {
        width: 100%;
        height: 130px;
        border-radius: 20px;
        background-image: linear-gradient(to right, #868686, #b4b4b4);
        display: flex;
        align-items: center;
        padding: 0 15px;
        .user_left {
          width: 80px;
          height: 80px;
          .photo {
            width: 70px;
            height: 70px;
            background-color: white;
            border-radius: 50%;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              vertical-align: middle;
            }
            .file {
              position: absolute;
              top: 0;
              left: 0;
              opacity: 1;
              width: 100%;
              height: 100%;
              border-radius: 50%;
              opacity: 0;
            }
          }
        }
        .user_right {
          height: 80px;
          margin-left: 15px;
          padding: 10px 0;
          text-align: left;
          color: white;
          .van-icon {
            vertical-align: -2px;
          }
          .name {
            margin-bottom: 12px;
          }
        }
      }
      .func {
        width: 100%;
        margin-top: 15px;
        background-color: #fff;
        padding: 0 15px 0 10px;
        border-radius: 8px;
        li {
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: left;
          box-sizing: border-box;
          padding-left: 8px;
          border-bottom: 1px solid #f1f1f1;
          border-left: none;
          position: relative;
          .likenum {
            background-color: #f53d34;
            border-radius: 20px;
            padding: 2px 5px;
            color: white;
            font-size: 12px;
            position: absolute;
            line-height: normal;
            top: 50%;
            right: 23px;
            transform: translateY(-50%);
          }
          &:nth-child(1) {
            color: #868686;
            height: 40px;
            font-size: 12px;
            line-height: 40px;
          }
          .van-icon-arrow {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            color: #d0d0d0;
          }
          .btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0px;
            width: 70px;
            height: 25px;
            border-radius: 20px;
            line-height: 25px;
            border: 1px solid #fe3c38;
            span {
              position: absolute;
              font-size: 12px;
              color: #fe3c38;
              &:nth-child(1) {
                left: 5px;
              }
              &:nth-child(2) {
                right: 5px;
              }
            }
            i {
              position: absolute;
              display: block;
              width: 37px;
              height: 23px;
              background-color: #f53d34;
              border-radius: 20px;
              transition: transform 0.2s linear;
            }
          }
          .speed {
            position: absolute;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
            width: 70px;
            height: 25px;
            font-size: 18px;
            display: flex;
            justify-content: space-between;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #fe3c38;
            span {
              flex: 1;
              height: 25px;
              line-height: 25px;
              text-align: center;
              .van-icon-minus,
              .van-icon-plus{
                color: black;
                font-size: 14px;
              }
              &:nth-child(2) {
                font-size: 12px;
                font-weight: bold;
                border-left: 1px solid #fe3c38;
                border-right: 1px solid #fe3c38;
              }
            }
          }
        }
      }
    }
    .collectlist {
      width: 55vw;
      height: 100vh;
      background-color: white;
      border-left: 1px solid skyblue;
      position: absolute;
      top: 0;
      right: 0;
      overflow-y: auto;
      .likelist {
        width: 100%;
        li {
          width: 100%;
          height: 30px;
          line-height: 30px;
          text-align: left;
          padding-left: 5px;
          box-sizing: border-box;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          border-bottom: 1px solid skyblue;
        }
      }
    }
  }
}
</style>